<%-- 
    Document   : driver
    Created on : 2013-5-12, 18:41:42
    Author     : piaohao
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
    <head>
        <base href="<%= basePath%>"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <%@include file="../main/common.jsp" %>
        <title>驾驶员统计</title>
        <script type="text/javascript">
            Ext.onReady(function() {
                var driverStore = Ext.create('Ext.data.Store', {
                    fields: ['name', 'total'],
                    proxy: {
                        type: 'ajax',
                        url: 'statistic/getDriverByOrg',
                        reader: {
                            type: 'json',
                            root: 'data'
                        }
                    },
                    autoLoad: true
                });
                var chart = Ext.create('Ext.chart.Chart', {
                    width: 1000,
                    height: 400,
                    animate: true,
                    store: driverStore,
                    axes: [
                        {
                            type: "Numeric",
                            position: 'left',
                            fields: ['total'],
                            title: '总数',
                            grid: true,
                            minimum: 0
                        },
                        {
                            type: 'Category',
                            position: 'bottom',
                            fields: ['name'],
                            title: '分类'
                        }
                    ],
                    series: [
                        {
                            type: 'column',
                            xField: 'name',
                            yField: 'total',
                            axis: 'left',
                            highlight: true,
                            tips: {
                                trackMouse: true,
                                width: 140,
                                height: 28,
                                renderer: function(storeItem, item) {
                                    this.setTitle("记录数：" + storeItem.get("total"));
                                }
                            },
                            label: {
                                display: 'insideEnd',
                                field: 'total',
                                renderer: Ext.util.Format.numberRenderer('0'),
                                orientation: 'horizontal',
                                color: '#333',
                                'text-anchor': 'middle'
                            },
                            markerConfig: {
                                type: 'cross',
                                size: 4,
                                radius: 4,
                                'stroke-width': 0
                            }}
                    ]
                });
                var panel = Ext.create("Ext.panel.Panel", {
                    items: [chart],
                    tbar: [{
                            fieldLabel: "统计方式",
                            id: "combo1",
                            xtype: "combo",
                            emptyText: "--请选择--",
                            editable: false,
                            store: Ext.create('Ext.data.Store', {
                                fields: ['text', 'value'],
                                data: [
                                    {text: "按公司统计人数", value: 1},
                                    {text: "按年龄段统计人数", value: 2},
                                    {text: "按文化程度统计人数", value: 3},
                                    {text: "按性别统计人数", value: 4}
                                ]
                            }),
                            queryMode: 'local',
                            displayField: 'text',
                            valueField: 'value',
                            value: "",
                            listeners: {
                                select: function(combo, record) {
                                    if (record[0].get("value") === 1) {
                                        chart.getStore().load({url: "statistic/getDriverByOrg"});
                                    } else if (record[0].get("value") === 2) {
                                        chart.getStore().load({url: "statistic/getDriverByAge"});
                                    } else if (record[0].get("value") === 3) {
                                        chart.getStore().load({url: "statistic/getDriverByEdu"});
                                    } else if (record[0].get("value") === 4) {
                                        chart.getStore().load({url: "statistic/getDriverBySex"});
                                    }
                                }
                            }
                        }, "-", {
                            text: '保存图表',
                            handler: function() {
                                Ext.MessageBox.confirm('确定下载', '你想下载这个图表的图片吗?', function(choice) {
                                    if (choice === 'yes') {
                                        chart.save({
                                            type: 'image/png'
                                        });
                                    }
                                });
                            }
                        }, "-", {
                            text: '重新加载',
                            handler: function() {
                                var val = Ext.getCmp("combo1").getValue();
                                if (val === 1) {
                                    chart.getStore().load({url: "statistic/getDriverByOrg"});
                                } else if (val === 2) {
                                    chart.getStore().load({url: "statistic/getDriverByAge"});
                                } else if (val === 3) {
                                    chart.getStore().load({url: "statistic/getDriverByEdu"});
                                } else if (val === 4) {
                                    chart.getStore().load({url: "statistic/getDriverBySex"});
                                }
                            }
                        }]
                });
                var viewport = Ext.create("Ext.Viewport", {
                    layout: {type: "border"},
                    items: [
                        {region: "center", layout: "fit", items: [panel]}
                    ]
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>
